<template>
  <div class="mt-5">
    <NDataTable
      :loading="rLoading"
      :columns="rColumns"
      :data="rList"
      style="--n-merged-td-color-hover: transparent"
    ></NDataTable>

    <!-- 分页 -->
    <div class="page">
      <NFlex justify="center">
        <NPagination
          v-model:page="rPage.pageNumber"
          :page-size="rPage.pageSize"
          :item-count="rPage.total"
          @update-page="getRList"
        ></NPagination>
      </NFlex>
    </div>
  </div>

  <!-- 弹框区域 -->
  <div>
    <!-- 举报详情 弹框 -->
    <div>
      <NModal style="width: 45vw" v-model:show="rIVisible" title="举报详情" preset="dialog">
        <NDataTable
          class="mt-5 mb-3"
          :bordered="false"
          :bottom-bordered="false"
          style="--n-merged-td-color-hover: transparent"
          :loading="rILoading"
          :columns="rIColumns"
          :data="rIList"
        ></NDataTable>

        <!-- 分页 -->
        <div class="page" v-if="!rILoading">
          <NFlex justify="center">
            <NPagination
              v-model:page="rIPage.pageNumber"
              :page-size="rIPage.pageSize"
              :item-count="rIPage.total"
              @update-page="queryRIList"
            ></NPagination>
          </NFlex>
        </div>
      </NModal>
    </div>

    <!-- 删评 -->
    <div>
      <NModal
        type="error"
        style="width: 30vw"
        v-model:show="dVisible"
        title="删除评论"
        preset="dialog"
      >
        <div>
          <NInput
            v-model:value="dRInfo.reason"
            placeholder="请输入删除理由"
            type="textarea"
            rows="4"
          ></NInput>
        </div>
        <template #action>
          <NSpace justify="center">
            <NButton @click="deleteRRI" type="error" :loading="dRILoading">确认删除</NButton>
          </NSpace>
        </template>
      </NModal>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Api } from '@/types/Api'
import type { BaseDataResult, BaseResult, PageBean, PageVO } from '@/types/BaseResult'
import type { TbMessageReply, TbMessageReplyReport } from '@/types/Message'
import { h, onMounted, ref } from 'vue'
import {
  NButton,
  NDataTable,
  NFlex,
  NInput,
  NModal,
  NPagination,
  NSpace,
  useMessage,
  type DataTableColumn,
} from 'naive-ui'
import { Tools } from '@/types/Tools'
const message = useMessage()
import { useRouter } from 'vue-router'
const router = useRouter()

//#region 数据处理

// 被举报评论的信息
const rList = ref([] as Array<TbMessageReply>)
const rLoading = ref(false)
const rPage = ref({ pageNumber: 1, pageSize: 10 } as PageBean)

const getRList = () => {
  rLoading.value = true
  Api.get(
    `/admin/reply/${rPage.value.pageSize}/${rPage.value.pageNumber}`,
    {},
    (data: BaseDataResult<PageVO<TbMessageReply>>) => {
      rLoading.value = false
      if (data.success) {
        rList.value = data.data.list
        rPage.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}

onMounted(() => {
  getRList()
})

// 被举报评论的举报信息
const rIList = ref([] as Array<TbMessageReplyReport>)
const rILoading = ref(false)
const rIVisible = ref(false)
const rIPage = ref({ pageNumber: 1, pageSize: 5 } as PageBean)
const rImrid = ref(-1)

const showRIVisible = (info: TbMessageReply) => {
  rIList.value = []
  rIPage.value.pageNumber = 1
  rImrid.value = info.mrid
  rIVisible.value = true
  queryRIList()
}

const queryRIList = () => {
  rILoading.value = true
  Api.get(
    `/admin/reply/${rImrid.value}/${rIPage.value.pageSize}/${rIPage.value.pageNumber}`,
    {},
    (data: BaseDataResult<PageVO<TbMessageReplyReport>>) => {
      rILoading.value = false
      if (data.success) {
        rIList.value = data.data.list
        rIPage.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}

// 删除评论
const dRInfo = ref({ mrid: -1, reason: '' } as TbMessageReply)
const dVisible = ref(false)
const dRILoading = ref(false)
const showDV = (info: TbMessageReply) => {
  dRInfo.value.mrid = info.mrid
  dRInfo.value.reason = ''
  dVisible.value = true
}

const deleteRRI = () => {
  dRILoading.value = true
  Api.delete('/admin/reply', dRInfo.value, (data: BaseResult) => {
    dRILoading.value = false
    if (data.success) {
      dVisible.value = false
      getRList()
      message.success('删除成功')
      return
    }
    message.error(data.message)
  })
}

//#endregion

//#region 表格

// 评论信息表
const rColumns = [
  {
    title: '发表人id',
    key: 'uid',
    width: 100,
  },
  {
    title: '发表的评论',
    key: 'info',
  },
  {
    title: '发表时间',
    width: 200,
    render: (row) => {
      return Tools.formatDate(row.lastupdate)
    },
  },
  {
    title: '处理结果',
    key: 'reason',
    render: (row) => {
      return h(
        'span',
        {
          style: {
            color: row.deleted == 'n' ? 'rgb(233,136,136)' : '',
          },
        },
        row.deleted == 'n' ? '待处理' : row.reason,
      )
    },
  },
  {
    title: '操作',
    width: 300,
    render: (row) => {
      return h(NSpace, {}, [
        // 跳转到帖子详情
        h(
          NButton,
          {
            text: true,
            type: 'info',
            size: 'small',
            onClick: () => {
              window.open(router.resolve(`/message/${row.mid}`).href)
            },
          },
          '评论详情',
        ),
        // 查看举报原因
        h(
          NButton,
          {
            text: true,
            type: 'primary',
            size: 'small',
            onClick: () => {
              showRIVisible(row)
            },
          },
          '举报详情',
        ),
        // 确认删除
        h(
          NButton,
          {
            text: true,
            type: 'error',
            size: 'small',
            disabled: row.deleted == 'y' ? true : false,
            onClick: () => {
              showDV(row)
            },
          },
          '确认删评',
        ),
      ])
    },
  },
] as DataTableColumn<TbMessageReply>[]

// 举报信息表
const rIColumns = [
  {
    title: '举报人id',
    key: 'uid',
  },
  {
    title: '举报原因',
    key: 'info',
  },
  {
    title: '举报时间',
    key: 'created',
    render: (row) => {
      return Tools.formatDate(row.created)
    },
  },
] as DataTableColumn<TbMessageReplyReport>[]

//#endregion
</script>

<style scoped lang="scss"></style>
